<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png" alt="logo" title="学成在线">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">课程</a>
                </li>
                <li>
                    <a href="#">职业规划</a>
                </li>
            </ul>
        </div>

        <div class="search">
            <input type="text" style="width: 345px;height: 40px;float: left;border: 2px solid #00a4ff;
            border-right: 0;padding-left: 15px;" placeholder="确认关键词">
            <div style="width: 48px;height: 44px;float: left;background-color: #00a4ff;">
                <input type="button" style="width: 50px;height: 44px;background-image: url(images/btn.png);
                border: none;">
            </div>



        </div>
        <div class="user">
            <img style="vertical-align: middle;display: inline-block" src="images/user.png"> 姓名:洪潇涵
        </div>
    </div>

    <div class="banner">

        <!-- 版心 -->
        <div class="w">
            <div class="banner-left">
                <ul>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                    <li><a href="#">JAVA基础入门</a><span>&gt;</span></li>
                </ul>
            </div>

            <div class="banner-right">
                <div class="banner-right-top">
                    我的课程表
                </div>
                <div class="banner-right-xia">
                    <div>
                        <div>
                            <h4>继续学习 程序设计</h4>
                            <p>正在学习-使用对象</p>

                        </div>
                        <hr>
                        <div>
                            <h4>继续学习 程序设计</h4>
                            <p>正在学习-使用对象</p>

                        </div>
                        <hr>
                        <div>
                            <h4>继续学习 程序设计</h4>
                            <p>正在学习-使用对象</p>

                        </div>
                        <hr>

                        <div class="kcbutton">
                            <input style="  width: 190px;
                            height: 50px;border: none;background-color: #00a4ff;color: white;font-size: 20px;" type="button" value="全部课程">
                        </div>

                    </div>

                </div>

            </div>

        </div>


    </div>
    <div class="goods">
        <div class="sm">
            <h3>精品推荐</h3><span>|</span>
        </div>
        <div class="zj">
            <ul>
                <li>jQuery</li><span>|</span>
                <li>jQuery</li><span>|</span>
                <li>jQuery</li><span>|</span>
                <li>jQuery</li><span>|</span>
                <li>jQuery</li><span>|</span>
            </ul>
        </div>
        <div class="xm">
            <h3 style="font-weight: 400;font-size: 16px;float: right;">修改兴趣</h3>
        </div>

    </div>

    <div style="margin-top: 50px;" class="w">
        <div style="height: 40px; margin-bottom: 30px;">
            <h3 style="float: left;margin-left: 30px;color: black;height: 40px;line-height: 40px;">精品推荐</h3>
            <a href="#" style="float: right;font-size: 13px;color: black;height: 40px;line-height: 40px;margin-right: 20px;">查看全部</a>
        </div>

        <div class="skkc">
            <ul>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>
                <li>
                    <img style="height: 150px;width: 228px;" src="images/pic.png">
                    <h3 style="padding: 20px 20px 10px 20px;font-weight: 400;font-size: 17px;">
                        Think PHP 5.0 博客系统实战项目演练
                    </h3>
                    <span style="padding-left: 20px;font-size: 14px;color: burlywood;">高级</span>
                    <span style="font-size: 14px;">• 1125人在学习</span>
                </li>

            </ul>

        </div>

    </div>

    <div style="height: 400px;background-color: white;">

        <div class="w" style="padding-top: 50px;">
            <div style="float: left;margin-right: 300px;">
                <img src="images/logo.png" alt="">
                <p style="font-size: 12px;">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>

            </div>
            <div class="gg">
                <h3 style="font-weight: 400;font-size: 20px;">关于学成网</h3>
                <ul>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">团队管理</a></li>
                    <li><a href="#">工作计划</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">客服</a></li>
                </ul>
            </div>
            <div class="gg">
                <h3 style="font-weight: 400;font-size: 20px;">关于学成网</h3>
                <ul>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">团队管理</a></li>
                    <li><a href="#">工作计划</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">客服</a></li>
                </ul>
            </div>
            <div class="gg">
                <h3 style="font-weight: 400;font-size: 20px;">关于学成网</h3>
                <ul>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">团队管理</a></li>
                    <li><a href="#">工作计划</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">客服</a></li>
                </ul>
            </div>



        </div>

    </div>
</body>

</html>